.menu01 {
  display: flex;
}

.menu01 > div {
  margin: 0px 1rem;
  cursor: pointer;
}

.line {
  background-color: #1976d2;
  width: 100%;
  height: 0.2rem;
  transform: scaleX(0);
  transition: transform 0.5s linear;
  margin-top: 0.5rem;
}

.menu01 > div:hover .line {
  transform: scaleX(1);
}

.active {
  transform: scaleX(1);
}

.menu02 {
  display: flex;
  position: relative;
}

.menu02 > div {
  width: 7rem;
  text-align: center;
  padding: 0.5rem 0px;
}

.line02 {
  width: 7rem;
  height: 0.2rem;
  background-color: #1976d2;
  transition: transform 0.5s linear;
  transform: translateX(0%);
  position: absolute;
  left: 0px;
  bottom: 0px;
}

/* 

  元素名称:nth-of-type(n)
  n:表示第几个指定名称的元素
  div:nth-of-type(1)表示找到div中的第一个

  a ~ b 表示找到a后面的b
  a + b 表示找到a后面紧挨着b
  a   b 表示找到a里面的b，不论多少级
  a > b 表示找到a里面第一级的b

  .menu02 > div:nth-of-type(1):hover ~ .line02
  表示当class为menu02的第一级div中第一个在鼠标悬停时
  离他最近的class为line02的元素套用样式
*/

.menu02 > div:nth-of-type(1):hover ~ .line02 {
  transform: translateX(0%);
}

.menu02 > div:nth-of-type(2):hover ~ .line02 {
  transform: translateX(100%);
}

.menu02 > div:nth-of-type(3):hover ~ .line02 {
  transform: translateX(200%);
}

.menu02 > div:nth-of-type(4):hover ~ .line02 {
  transform: translateX(300%);
}
